import {reactive} from 'vue'
import {MsgUtil} from '@/utils'
import {CloseModelEvent} from '@/types'

/**
 * @desc 简单服务对象 只对弹窗元素进行管理控制
 * */

export class LocalModal {


    /**
     * Vue提交事件
     * */
    emit: any


    LAYER = reactive({
        title: '',
        visible: true,
        width: 640,
        alignCenter:false ,
        top:50 ,
        closable: true,
        escToClose: true,
        unmountOnClose: true,
        maskClosable: false,
        okLoading:false ,
        okText: '确定保存'
    })


    constructor(emit) {
        this.emit = emit
    }


    /**
     * @desc 初始化窗口对象

     * @param emit  关闭窗口时的回调方法
     * */


    /**
     * @desc 修改窗口宽度
     * @param title 窗口标题
     * @param okText 窗口提交按钮的文本
     * @param width 窗口宽度数值
     * */
    setMD(title, okText = '确定保存', width = 640) {
        if (width <= 200) {
            MsgUtil.message("窗口大小不能小于200像素")
            return
        }
        this.LAYER.width = width;
        this.LAYER.title = title;
        this.LAYER.okText = okText;
        return this;
    }


    /*
    * 锁定窗口事件
    * */
    lockMd = () => {
        this.LAYER.okLoading = true;

        this.LAYER.closable = false;
        this.LAYER.escToClose = false;
    }

    /*
  * 解锁窗口操作
  * */
    unLockMd = () => {
        this.LAYER.okLoading = false
        this.LAYER.closable = true;
        this.LAYER.escToClose = true;
    }


    /**
     * 窗口事件
     * */
    onCancel = (eventCode: CloseModelEvent = 'NONE') => {
        this.emit('cancel', eventCode)
    }
}

